<template>
    <div v-loading="loading">
        <h2>{{ quizInfo?.title }}</h2>
        <div class="tag-list">
            <el-tag color="#28A745" effect="dark">{{ $t('mod.quiz.view.tag_score_received') }}</el-tag>
            <el-tag color="#28A745" effect="dark">{{ $t('mod.quiz.view.tag_score_passed') }}</el-tag>
        </div>
        <div class="rich-box" v-html="quizInfo?.description"></div>
        <div class="quiz-info">
            <p>{{ quizInfo?.type }}</p>
            <p>{{ $t('mod.quiz.view.pass_score', { score: quizInfo?.pass_score, total: quizInfo?.total_score }) }}</p>
            <router-link :to="`/console/course/${courseId}/unit/${unitId}/quiz/${quizId}/report`" v-if="!roleStore.isStudent">
                {{ $t('mod.quiz.view.report_link', { count: quizInfo?.completed_students_count }) }}
            </router-link>
        </div>

        <template v-if="answerRecords.length">
            <h3>{{ $t('mod.quiz.view.history_title') }}</h3>
            <el-table :data="answerRecords" stripe>
                <el-table-column :label="$t('mod.quiz.view.table_attempt')" width="100">
                    <template #default="{ $index }">{{ $index + 1 }}</template>
                </el-table-column>
                <el-table-column :label="$t('mod.quiz.view.table_status')">
                    <template #default="{ row }">
                        <p>{{ row.status_text }}</p>
                        <p v-if="row.end_time">
                            {{ $t('mod.quiz.view.submitted_at', { time: formatLoginTime(row.end_time) }) }}
                        </p>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('mod.quiz.view.table_score')" width="100">
                    <template #default="{ row }">
                        <div v-if="row.status === 2">{{ row.actual_score }}</div>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('mod.quiz.view.table_review')" width="100">
                    <template #default="{ row }">
                        <router-link :to="`/console/course/${courseId}/unit/${unitId}/quiz/${quizId}/review/${row.id}`" v-if="row.status === 2">
                            {{ $t('mod.quiz.view.review_link') }}
                        </router-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="btn-list">
            <el-button color="#F06423" @click="goPage(`/console/course/${courseId}/unit/${unitId}/quiz/${quizId}/attempt`)">
                {{ lastAnswerRecords ? $t('mod.quiz.view.btn_continue') : $t('mod.quiz.view.btn_preview') }}
            </el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import QuizService from '@/api/quiz'
import type { QuizInfo, AnswerItem } from '@/types/quiz'

import { goPage } from '@/utils/global'
import { formatLoginTime } from '@/utils/global'

import { useRoleStore } from '@/stores/role'

const route = useRoute()
const roleStore = useRoleStore()
const courseId = computed(() => Number(route.params.courseId))
const unitId = computed(() => Number(route.params.unitId))
const quizId = computed(() => Number(route.params.quizId))
const loading = ref(false)

const quizInfo = ref<QuizInfo | null>()
const answerRecords = ref<AnswerItem[]>([])
const lastAnswerRecords = ref<AnswerItem | null>()
function getQuizInfo() {
    loading.value = true
    QuizService.getById(quizId.value)
        .then(res => {
            quizInfo.value = res
            getAnswerRecord()
        })
        .catch(() => {
            loading.value = false
        })
}
function getAnswerRecord() {
    QuizService.records(quizId.value)
        .then(res => {
            answerRecords.value = res
            lastAnswerRecords.value = answerRecords.value.find(item => item.status == 1)
        })
        .finally(() => {
            loading.value = false
        })
}

onMounted(() => {
    getQuizInfo()
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

h3 {
    margin-bottom: 18px;
    font-size: 26px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

.tag-list {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.quiz-info {
    margin-top: 50px;
    padding: 15px 0;
    font-size: 15px;
    color: #4c4c4c;
    line-height: 1.66;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    p {
        margin-bottom: 15px;
    }

    a {
        margin-top: 15px;
        display: block;
        color: #e63946;

        &:hover {
            color: #4c4c4c;
        }
    }
}

.btn-list {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
</style>
